#backToTopBtn {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: #555;
    color: white;
    cursor: pointer;

    padding: 15px;
    border-radius: 50%; /* 将按钮改为圆形 */
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; /* 添加过渡效果 */
    animation: pulse 2s infinite, rotate 5s infinite linear; /* 添加脉冲动画和旋转动画 */
    pointer-events: auto; /* 确保按钮可以被点击 */
}

#backToTopBtn:hover {
    background-color: #ff6347; /* 改变悬停时的背景颜色为番茄红 */
    transform: scale(1.2) rotate(360deg); /* 放大按钮并旋转一周 */
    box-shadow: 4px 4px 20px rgba(255, 99, 71, 0.5); /* 改变悬停时的阴影效果 */
}

#backToTopBtn:active {
    animation: launch 0.5s forwards; /* 添加点击时的发射动画 */
}

/* 定义脉冲动画 */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 105, 180, 0.7);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(255, 105, 180, 0);
    }
}

/* 定义旋转动画 */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 定义发射动画 */
@keyframes launch {
    0% {
        transform: translateY(0) rotate(0deg);
        box-shadow: 0 0 0 0 rgba(255, 255, 0, 0.7);
    }
    100% {
        transform: translateY(-200px) rotate(180deg);
        box-shadow: 0 0 50px 20px rgba(255, 255, 0, 0);
        opacity: 0;
    }
}